<template>
<div class="wbcolor">
    <div class="item" @click="setcolor('#FF0000')">
        <div class="icon red"></div>
    </div>
    <div class="item" @click="setcolor('#FFCC00')">
        <div class="icon yellow"></div>
    </div>
    <div class="item" @click="setcolor('#4C51FD')">
        <div class="icon blue"></div>
    </div>
    <div class="item" @click="setcolor('#06FC00')">
        <div class="icon green"></div>
    </div>
    <div class="item" @click="setcolor('#FFFFFF')">
        <div class="icon white"></div>
    </div>
    <div class="item" @click="setcolor('#000000')">
        <div class="icon black"></div>
    </div>
</div>
</template>

<script>
    import message from "../../static/js/message";
    export default {
        name: "Wbcolor",
        methods:{
            setcolor(color){
                message.$emit('setcolor',color);
            }
        }
    }
</script>

<style scoped>

    .wbcolor{
        width:240px;
        height:38px;
        background:rgba(50,55,73,1);
        border:1px solid rgba(27,29,38,1);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }


    .item{
        width: 16%;
        height: 100%;
    }

    .item:hover{
        background:rgba(0,0,0,1);
        opacity:0.80;
    }

    .icon{
        width:13px;
        height:13px;
        border-radius:50%;
        margin: 0 auto;
        margin-top: 12px;
    }

    .red{
        background:rgba(255,0,0,1);
    }

    .yellow{
        background:rgba(255,204,0,1);
    }

    .blue{
        background:rgba(76,81,253,1);
    }

    .green{
        background:rgba(6,252,0,1);
    }


    .white{
        background:rgba(255,255,255,1);
    }

    .black{
        background:rgba(0,0,0,1);
    }

</style>
